<template>
    <div v-if="currentPage === 1" class="h-full">
        <div class="bg-#3f3f3f px-13px py-6px">
            <!-- 功能操作 -->
            <div>
                <div class="text-12px font-bold">
                    - 功能操作
                </div>
                <div>
                    <nut-button class="!w-full !h-30px !bg-#d961b2 !border-none !text-#fff !text-12px !font-bold !my-13px" @click="currentPage = 3">
                        发布新游戏
                    </nut-button>
                </div>
                <div>
                    <nut-button class="!w-full !h-30px !bg-#3cbafb !border-none !text-#fff !text-12px !font-bold" @click="currentPage = 2">
                        审核状态
                    </nut-button>
                </div>
            </div>
            <!-- 编辑游戏资料 -->
            <div class="mt-30px">
                <div class="text-12px font-bold">
                    - 编辑游戏资料
                </div>
                <nut-input v-model="value" class="rounded-full h-30px my-14px" readonly>
                    <template #right>
                        <triangle-down color="#1c1c1c" size="8px"></triangle-down>
                    </template>
                </nut-input>
                <div class="text-12px">
                    <span>状态：</span>
                    <span class="pending">待审核</span>
                </div>
                <div class="grid grid-cols-2 gap-2px my-13px">
                    <nut-button class="!h-30px !bg-#000000 !border-none !text-#fff !text-12px !font-bold">
                        修改内容
                    </nut-button>
                    <nut-button class="!h-30px !bg-#000000 !border-none !text-#fff !text-12px !font-bold">
                        下架游戏
                    </nut-button>
                </div>
                <div class="grid grid-cols-2 gap-2px">
                    <nut-button class="!h-30px !bg-#000000 !border-none !text-#fff !text-12px !font-bold">
                        版本更新
                    </nut-button>
                    <nut-button class="!h-30px !bg-#000000 !border-none !text-#fff !text-12px !font-bold">
                        发布公告
                    </nut-button>
                </div>
            </div>
        </div>
        <!-- 游戏页面预览 -->
        <div class="mt--1px">
            <div class="text-12px font-bold px-13px pt-17px bg-#3f3f3f">
                - 游戏页面预览
            </div>
            <img src="../../images/cover.webp" alt="" class="w-full">
        </div>

        <!-- 游戏详情 -->
        <div class="game-content">
            <img src="@/pages/game-detail/images/cover.webp" alt="" style="width: 120px;flex-shrink: 0;">
            <div class="right-box">
                <div class="title">
                    <span>LUST GODDESS</span>
                    <span>187366次下载</span>
                </div>
                <div class="desc">
                    LUST GODDESS是一个热门且刺激的收藏卡片游戏，你将在其中组建你的独特的性感女佣小队。赢得她们的爱和信任，她们会通过实现你最狂野、最淫荡的幻想来向你表达她们的感激！
                </div>
                <div class="hint">
                    *免費游可能包括應用程式内購買。
                </div>
                <div class="info">
                    <div class="left">
                        <div>
                            <div class="label">
                                适配系统：
                            </div>
                            <div class="con">
                                安卓/WINS/MAC
                            </div>
                        </div>
                        <div>
                            <div class="label">
                                大小：
                            </div>
                            <div class="con">
                                108M
                            </div>
                        </div>
                        <div>
                            <div class="label">
                                类型：
                            </div>
                            <div class="con">
                                <a href="">
                                    休闲
                                </a>
                                <a href="">
                                    养成
                                </a>
                                <a href="">
                                    模拟经营
                                </a>
                            </div>
                        </div>
                        <div>
                            <div class="label">
                                發行商：
                            </div>
                            <div class="con">
                                POCHEMU ITD
                            </div>
                        </div>
                        <div>
                            <div class="label">
                                發行日期：
                            </div>
                            <div class="con">
                                2025-1-1
                            </div>
                        </div>
                        <div class="dp">
                            <div>
                                <img src="@/pages/game-detail/images/praise.webp" alt="">
                                <span>164,520</span>
                            </div>
                            <div>
                                <img src="@/pages/game-detail/images/trample.png" alt="">
                                <span>520</span>
                            </div>
                        </div>
                    </div>
                    <div class="score">
                        <div>
                            <span>95</span>
                            <span class="text-8px">%</span>
                        </div>
                        <div class="text-8px">
                            喜欢
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="order">
            <img v-for="item in 10" :key="item" src="@/pages/game-detail/images/order-game1.webp" alt="">
        </div>
        <div class="game-detail">
            <div class="detail-wrap" :class="{ 'unfold': isUnfold }">
                <div class="title">
                    - 游戏详情
                </div>
                <div v-for="item in 4" :key="item" class="item">
                    <div>
                        <div class="sub-title">
                            主要特色
                        </div>
                        <div class="content">
                            你已在一个未来的世界中醒来作为一队急切想要为你服务的雇佣兵的队长。你准备好面对你将要遇到的挑战了吗？那就勇往直前，向他们证明你是他们曾经有过的最好的队长！
                        </div>
                        <img src="@/pages/game-detail/images/order-game1.webp" alt="">
                    </div>
                </div>
            </div>
            <nut-divider v-if="!isUnfold" @click="isUnfold = !isUnfold">
                <div class="read-more">
                    <span>阅读更多</span>
                    <div class="triangle"></div>
                </div>
            </nut-divider>
        </div>

        <!-- 返回最上层 -->
        <div class="text-center mb-40px mt-15px">
            <nut-button class="!w-173px !h-30px !bg-#d961b2 !border-none !text-#fff !text-12px"
                        @click="toTop">
                返回最上层
            </nut-button>
        </div>
    </div>

    <audit-status v-else-if="currentPage === 2" @back="back"></audit-status>
    <release-game v-else-if="currentPage === 3" @back="back"></release-game>
</template>

<script setup lang="ts">
import { TriangleDown } from '@nutui/icons-vue'
import { ref } from 'vue'
import auditStatus from './auditStatus.vue'
import releaseGame from './releaseGame.vue'
const currentPage = ref(1)

const value = ref('LUST')
const isUnfold = ref(false)

// 返回最上层
const toTop = () => {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    })
}

// 返回
const back = () => {
    currentPage.value = 1
}
</script>

<style scoped lang="scss">
:deep(.nut-input) {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 12px;
    padding-right: 12px;
    line-height: 30px;
}

:deep(.nut-center) {
    input {
        text-align: center !important;
    }
}

// 待审核
.pending {
    color: #93beff;
}

// 已通过
.passed {
    color: #8cff68;
}

// 已下架
.down {
    color: #ffa0a0;
}

.order {
    display: flex;
    background: #3f3f3f;
    padding: 10px 0;
    overflow-x: auto;
    gap: 5px;

    img {
        width: 150px;
    }
}

.game-content {
    display: flex;
    // align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    background: #3f3f3f;
    padding: 15px;
    gap: 10px;
    height: fit-content;

    .right-box {
        flex: 1;

        .title {
            display: flex;
            align-items: center;
            justify-content: space-between;

            &>span:first-child {
                font-size: 16px;
                font-weight: bold;
                color: #fff;
            }

            &>span:last-child {
                font-size: 12px;
                color: #a5a5a5;
            }
        }

        .desc,
        .hint {
            font-size: 12px;
            line-height: 12px;
        }

        .hint {
            margin-top: 10px;
        }

        .info {
            display: flex;
            align-items: end;
            justify-content: space-between;
            font-size: 12px;
            margin-top: 10px;

            .left {
                &>div {
                    display: flex;
                    align-items: center;

                    .label {
                        font-weight: bold;
                        width: 60px;
                    }
                }

                .dp {
                    margin-top: 5px;
                    gap: 20px;

                    &>div {
                        display: flex;
                        align-items: center;
                        gap: 4px;

                        img {
                            width: 14px;
                        }
                    }
                }
            }

            .score {
                width: 50px;
                height: 50px;
                background: url('../../../game-detail/images/score-bg.webp');
                background-size: 100% 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                line-height: 1em;
                // gap: 4px;

                &>div:first-child {
                    display: flex;
                    align-items: start;
                    gap: 2px;
                    margin-top: 3px;

                    &>span:first-child {
                        font-size: 20px;
                        line-height: 18px;
                        font-weight: bold;
                    }
                }
            }
        }
    }
}

.game-detail {
    background: #1c1c1c;
    padding: 10px 15px;

    .detail-wrap {
        max-height: 400px;
        overflow-y: hidden;
        position: relative;

        &::after {
            content: '';
            width: 100%;
            height: 200px;
            background: linear-gradient(to bottom, rgba(28, 28, 28, 0), #1c1c1c);
            position: absolute;
            bottom: 0;
            left: 0;
        }

        .title {
            font-size: 12px;
            font-weight: bold;
        }

        .item {
            margin: 10px 0;
            font-size: 9px;
            line-height: 16px;

            .sub-title {
                color: #ea49a7;
            }

            .content {
                color: #d6d6d6;
            }

            img {
                width: 100%;
                height: 100px;
                margin-top: 10px;
            }
        }
    }

    .read-more {
        display: flex;
        align-items: center;
        color: #fff;
        gap: 5px;

        .triangle {
            width: 0;
            height: 0;
            border-top: 8px solid #339ede;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
        }
    }

    .unfold {
        max-height: fit-content;

        &::after {
            display: none;
        }
    }

    .nut-divider {
        color: #339ede;
        margin: 0;
    }
}
</style>
